<template>
  <div>
    <Form
      :disabled="isDisabled"
      :show-message="!isDisabled"
      :model="modelForm"
      ref="refForm"
      class="ivu-form-no-margin-bottom"
      :rules="rules"
      :label-width="90"
    >
      <Row class="code-row-bg">
        <Col span="24">
          <Form-item prop="dataId" label="Data ID">
            <Input v-model="modelForm.dataId"  />
          </Form-item>
        </Col>
        <Col span="24">
          <Form-item prop="group" label="Group">
            <Input v-model="modelForm.group"  />
          </Form-item>
        </Col>
        <Col span="24">
          <Form-item prop="appName" label="应用名称">
            <Input v-model="modelForm.appName"  />
          </Form-item>
        </Col>
        <Col span="24" v-if="row.type === 'detail'">
          <Form-item prop="srcUser" label="操作人">
            <Input v-model="modelForm.srcUser"  />
          </Form-item>
        </Col>
        <Col span="24" v-if="row.type === 'detail'">
          <Form-item prop="srcIp" label="来源 IP">
            <Input v-model="modelForm.srcIp"  />
          </Form-item>
        </Col>
        <Col span="24">
          <Form-item prop="opTypeName" label="操作类型">
            <Input v-model="modelForm.opTypeName"  />
          </Form-item>
        </Col>
        <Col span="24">
          <Form-item prop="md5" label="MD5">
            <Input v-model="modelForm.md5"  />
          </Form-item>
        </Col>
        <Col span="24">
          <Form-item prop="content" label="配置内容">
            <Input type="textarea" :rows="6" v-model="modelForm.content"  />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import API from "@/api/historyVersion";
import rollback from "./rollback.vue";
export default {
  name: "",
  components: {},
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      modelForm: {
        dataId: "",
        group: "",
        appName: "",
        srcUser: "",
        srcIp: "",
        opType: "",
        md5: "",
        content: ""
      },
      rules: {
        dataId: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        group: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        srcUser: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        srcIp: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        opType: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        md5: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        content: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      let { type, namespaceId, dataId, group, nid } = this.row;
      this.$emit("SetPageWidth", 800);
      if (type === "detail") {
        this.$emit("SetTitle", "历史详情");
      } else {
        this.$emit("SetTitle", "配置回滚");
        this.$emit("SetPageActions", [
          {
            text: "回滚配置",
            theme: "primary",
            handle: () => {
              new this.$pageModal(
                rollback,
                {
                  props: {
                    row: {
                      ...this.row,
                      ...this.modelForm
                    }
                  }
                },
                data => {
                  if (data) {
                    this.$emit("Close",true);
                  }
                }
              );
            }
          },
          {
            text: "取消",
            handle: () => {
              this.$emit("Close");
            }
          }
        ]);
      }
      this.getHistoryDetail({
        namespaceId,
        dataId,
        group,
        nid
      });
    },
    getHistoryDetail(params) {
      API.getHistoryDetail(params).then(data => {
        this.modelForm = {
          ...this.modelForm,
          ...data,
          opTypeName: data.opType === 'U' ? '更新' : '插入'
        };
      });
    }
  },
  computed: {
    isDisabled() {
      return true; //this.row.type === "detail";
    }
  },
  watch: {}
};
</script>

<style lang='less' scoped >
</style>
